<template>
	<view class="uwo-autograph-modal" :style="{ display: visible ? 'block' : 'none' }">
		<view
			class="uwo-autograph-container"
			:style="{
				paddingTop: top + 'px'
			}"
		>
			<view class="" :style="{ width: width + 'px', height: height + 'px' }">
				<canvas
					class="canvas"
					disable-scroll="true"
					type="2d"
					:canvas-id="canvasId"
					:id="canvasId"
					@touchstart="handleStart"
					@touchmove="handleMove"
					@touchend="handleEnd"
				></canvas>
			</view>
			<view class="bottomBox">
				<view class="tip">请你在左侧空白处手动签写自己的真实姓名，签写完毕后点击保存按钮。</view>
				<button class="btn" style="margin-top: 18vw" @click="handleCancel">取消</button>
				<button class="btn" style="margin-top: 8vw" @click="handleClear">清除</button>
				<button class="btn blue" :loading="saveLoading" @click="handleSave">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
import { uuid } from '../js/util.js';
import { base64Upload, uniUpload } from '@/common/config.js';
export default {
	name: 'UwoAutographModal',
	props: {},
	data() {
		return {
			visible: false,
			saveLoading: false,
			canvasId: 'u' + uuid(9),
			top: 0,
			width: uni.getSystemInfoSync().windowWidth,
			height: uni.getSystemInfoSync().windowHeight - 154 - 0,
			canvasContext: null,
			points: []
		};
	},
	emits: ['ok'],
	methods: {
		show() {
			this.visible = true;
			this.$nextTick(() => {
				// #ifdef MP
				wx.createSelectorQuery()
					.in(this)
					.select(`#${this.canvasId}`)
					.fields({ node: true, size: true })
					.exec((res) => {
						console.log(res);
						const canvas = res[0].node;
						const ctx = canvas.getContext('2d');

						const dpr = wx.getSystemInfoSync().pixelRatio;
						canvas.width = res[0].width * dpr;
						canvas.height = res[0].height * dpr;
						ctx.scale(dpr, dpr);

						this.canvasContext = ctx;
						this.handleClear();
					});
				// #endif

				// #ifndef MP
				this.canvasContext = uni.createCanvasContext(this.canvasId, this);
				this.handleClear();
				// #endif
			});
		},
		handleStart(e) {
			const startX = e.changedTouches[0].x;
			const startY = e.changedTouches[0].y;
			let startPoint = {
				X: startX,
				Y: startY
			};
			this.points.push(startPoint);
		},
		handleMove(e) {
			let moveX = e.changedTouches[0].x;
			let moveY = e.changedTouches[0].y;
			let movePoint = {
				X: moveX,
				Y: moveY
			};
			this.points.push(movePoint); //存点
			let len = this.points.length;
			if (len >= 2) {
				this.canvasContext.beginPath();
				this.canvasContext.lineWidth = 3;
				this.canvasContext.lineCap = 'round';
				this.canvasContext.lineJoin = 'round';
				this.canvasContext.strokeStyle = 'black';
				this.canvasContext.fillStyle = '#FFFFFF';

				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.canvasContext.moveTo(point1.X, point1.Y);
				this.canvasContext.lineTo(point2.X, point2.Y);
				this.canvasContext.stroke();
				// #ifndef MP
				this.canvasContext.draw(true);
				// #endif
			}
		},
		handleEnd() {
			this.points = [];
		},
		handleClear() {
			setTimeout(() => {
				this.canvasContext.fillStyle = '#FFFFFF';
				this.canvasContext.fillRect(0, 0, this.width, this.height);
				// this.canvasContext.clearRect(0, 0, this.width, this.height);
				// #ifndef MP
				this.canvasContext.draw();
				// #endif
			}, 200);
		},
		handleCancel() {
			this.handleClear();
			this.visible = false;
		},
		handleSave() {
			this.saveLoading = true;
			// #ifdef MP
			var base64 = this.canvasContext.canvas.toDataURL('image/jpeg', 1.0);
			this.handleUpload(base64);
			// #endif
			// #ifndef MP
			uni.canvasToTempFilePath(
				{
					canvasId: this.canvasId,
					fileType: 'jpeg',
					quality: 1, //图片质量
					success: (res) => {
						// #ifdef H5
						this.handleUpload(res.tempFilePath);
						// #endif
						// #ifndef H5
						uniUpload(res.tempFilePath, { rotate: -90 }).then((res) => {
							this.uploadOk(res);
						});
						// #endif
					},
					fail(e) {
						console.log(e);
					}
				},
				this
			);
			// #endif
		},
		handleUpload(base64) {
			base64Upload(base64, '1.jpeg', { rotate: -90 }).then((res) => {
				this.uploadOk(res);
			});
		},
		uploadOk(res) {
			if (typeof res == 'string') {
				res = JSON.parse(res);
			}
			if (res.code === 1) {
				this.$emit('ok', res.data);
			}
			this.saveLoading = false;
			this.handleCancel();
		}
	}
};
</script>

<style lang="scss" scoped>
.uwo-autograph-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 9999999999;
	.uwo-autograph-container {
		background-color: #909090;
		width: 100%;
		height: 100%;
		.canvas {
			width: 100%;
			height: 100%;
			color: #ffffff;
			position: relative;
			z-index: 999;
		}
		.bottomBox {
			flex-direction: column;
			justify-content: center;
			width: 100px;
			height: 80vw;
			padding: 10px;
			position: fixed;
			left: 50%;
			bottom: -40vw;
			transform: rotate(90deg);
			margin-left: -50px;
			margin-bottom: 72px;
			.tip {
				font-size: 16px;
				color: #c12c1f;
			}
			.btn {
				width: 100%;
				height: 37px;
				background: #f5f5f5;
				border-radius: 19px;
				margin-top: 7px;
				text-align: center;
				line-height: 37px;
				color: #333333;
				font-size: 13px;
				&.blue {
					background: #284cf4;
					color: #fff;
				}
			}
		}
	}
}
</style>
